<template>
  <div class="setting-data">
    <p
      style="
        padding: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      "
    >
      <img
        :src="squareUrl"
        style="width: 70px; height: 70px; border-radius: 50%"
      />
      <!-- 修改头像 -->
      <span style="font-weight: bold"
        >修改头像
        <van-uploader :after-read="afterRead" />
      </span>
    </p>
    <!-- 用户账号 -->
    <div
      style="
        padding: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
      "
    >
      <div style="height: 100%; display: flex; align-items: center">
        <img
          src="../../../public/images/姓名.png"
          style="width: 20px; height: 20px"
        />
        <span style="margin-left: 10px; font-weight: bold">用户账号</span>
      </div>
      <div style="color: darkgray">python <van-icon name="arrow" /></div>
    </div>
    <!-- 手机号 -->
    <div
      style="
        padding: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
      "
    >
      <div style="height: 100%; display: flex; align-items: center">
        <img
          src="../../../public/images/手机号.png"
          style="width: 20px; height: 20px"
        />
        <span style="margin-left: 10px; font-weight: bold">手机号</span>
      </div>
      <div style="color: darkgray" @click="gophone">
        {{ tel }} <van-icon name="arrow" />
      </div>
    </div>
    <!-- 密码 -->
    <div
      style="
        padding: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
      "
    >
      <div style="height: 100%; display: flex; align-items: center">
        <img
          src="../../../public/images/密码.png"
          style="width: 20px; height: 20px"
        />
        <span style="margin-left: 10px; font-weight: bold">密码</span>
      </div>
      <div style="color: darkgray" @click="goupdatepwd">
        修改密码 <van-icon name="arrow" />
      </div>
    </div>
    <!-- 地址管理 -->
    <div
      style="
        padding: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
      "
    >
      <div style="height: 100%; display: flex; align-items: center">
        <img
          src="../../../public/images/地址管理.png"
          style="width: 20px; height: 20px"
        />
        <span style="margin-left: 10px; font-weight: bold">地址管理</span>
      </div>
      <div style="color: darkgray" @click="goresslist">
        管理我的地址 <van-icon name="arrow" />
      </div>
    </div>
    <div class="dellogin" @click="dellogin">退出登录</div>
  </div>
</template>

<script>
import router from "@/router";
import { showSuccessToast, showFailToast } from "vant";
import request, { getServerUrl } from "@/utils/request";
export default {
  async created() {
    const id = localStorage.getItem("id");
    const result = await request.get("user/action?id=" + id);
    // 拼接用户头像地址
    this.squareUrl =
      getServerUrl() + "media/userAvatar/" + result.data.user.avatar;
    this.tel = localStorage.getItem("phonenumber");
  },
  data() {
    return {
      // 头像地址
      squareUrl: "",
      // 手机号
      tel: "",
    };
  },
  methods: {
    // 退出登录
    dellogin() {
      localStorage.clear();
      router.replace("/login");
      showSuccessToast("退出成功");
    },
    //   修改密码
    goupdatepwd() {
      router.push("/updatepwd");
    },
    // 上传头像
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },

    // 管理地址
    goresslist() {
      router.push("/resslist");
    },
    // 管理手机号
    gophone() {
      router.push("/phone");
    },
  },
};
</script>

<style lang="scss">
.setting-data {
  width: 100vw;
  height: 85vh;
  .dellogin {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: rgb(216, 73, 73);
    font-weight: bold;
    font-size: 16px;
    color: black;
    position: absolute;
    bottom: 0;
  }
}
</style>
